<template>
  <div>
    <div class="shebeiliebiao">
      <con-title :topTitle="topTitle"></con-title>
    </div>
    <template>
      <!-- 标题 -->
      <el-tabs type="border-card" class="biaoqian1">
        <el-tab-pane label="所有设备"></el-tab-pane>
        <el-tab-pane label="LoRaWAN"></el-tab-pane>
        <el-tab-pane label="NB-loT"></el-tab-pane>
        <el-tab-pane label="4G/2G"></el-tab-pane>
        <el-tab-pane label="LoRaPP"></el-tab-pane>
        <div>
          <el-form label-width="100px">
            <el-form-item label="EUl：">
              <el-input
                placeholder="设备EUl"
                style="width: 400px"
                v-model.trim="query.eui"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备群组：">
              <el-select placeholder="设备群组" style="width: 400px">
              </el-select>
            </el-form-item>
            <el-form-item label="在线状态：">
              <el-select
                placeholder="在线状态"
                style="width: 400px"
                v-model="query.online"
              >
                <el-option
                  v-for="item in options"
                  :label="item.label"
                  :value="item.type"
                  :key="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定时间：">
              <el-date-picker
                v-model="query.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="searchFun"
                  >搜索</el-button
                >
                <el-button type="primary" icon="el-icon-delete" size="mini"
                  >清除条件</el-button
                >
                <el-button type="primary" icon="el-icon-refresh" size="mini"
                  >刷新</el-button
                >
              </el-button-group>
              <span class="jieguo" style="color: #666"
                >搜索结果：{{ total }}</span
              >
            </el-form-item>
          </el-form>
        </div>
      </el-tabs>
      <el-table :data="sensorlist" style="width: 98.8%" class="gateway-table">
        <el-table-column type="index" label="" width="100" align="center">
        </el-table-column>
        <el-table-column prop="eui" label="EUL" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="nums" label="传感器通道" align="center">
        </el-table-column>
        <el-table-column prop="devGroup" label="设备群组" align="center">
        </el-table-column>
        <el-table-column prop="loop" label="上报周期（分钟）" align="center">
        </el-table-column>
        <el-table-column prop="mhz" label="频率（MHz）" align="center">
        </el-table-column>
        <el-table-column label="在线状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.online | onlineType }}
          </template>
        </el-table-column>
        <el-table-column label="绑定时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.bTime | time }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <span class="caozuo">重命名 &nbsp;&nbsp;删除</span></el-table-column
        >
      </el-table>
    </template>
    <el-pagination
      class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.currpage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="query.pageSize"
      layout="sizes, prev, pager, next,jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $sensorlist } from "@/api/index";
export default {
  name: "GroupLeader",
  data() {
    return {
      sensorlist: [],
      topTitle: {
        type: "设备",
        text: "传感器列表",
        msg: "展示EUI、名称、状态、数据等设备信息，可根据EUI、群组，状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
      },
      total: 0,
      query: {
        currPage: 1,
        pageSize: 5,
        eui: "",
        online: "",
        agreement: "all",
        date: [],
      },
      options: [
        { type: true, label: "在线" },
        { type: false, label: "离线" },
        { type: "all", label: "全部" },
      ],
    };
  },
  computed: {
    dateStr() {
      let d1 = this.query.date[0];
      let d2 = this.query.date[1];
      let time1 = d1 && d1.getTime();
      let time2 = d2 && d2.getTime();
      if (time1 && time2) {
        return time1 + "-" + time2;
      } else {
        return "";
      }
    },
  },
  mounted() {
    $sensorlist().then((res) => {
      console.log(res);
      this.sensorlist = res.data.data;
    });
    this.getsensorlist();
  },
  methods: {
    getsensorlist() {
      var queryStr = { ...this.query };
      if (queryStr != "") {
        queryStr.date = this.dateStr;
      }
      $sensorlist(this.query).then((res) => {
        console.log(res);
        this.sensorlist = res.data.data;
        this.total = res.data.total;
      });
    },

    handleSizeChange(count) {
      this.query.pageSize = count;
      this.query.currPage = 1;
      this.getsensorlist();
    },
    handleCurrentChange(page) {
      this.query.currPage = page;
      this.getsensorlist();
    },
    searchFun() {
      this.getsensorlist();
    },
  },
  filters: {
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    time(val) {
      let d = new Date(+val);
      //   console.log(d);
      return (
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
      );
    },
  },
  components: {
    ConTitle,
  },
};
</script>

<style>
.shebeiliebiao {
  margin: 10px;
}
.gateway-table {
  margin-left: 10px;
  margin-top: 10px;
}
.fenye {
  margin-top: 40px;
  text-align: center;
}
.caozuo {
  color: #409eff;
}
.biaoqian1 {
  margin-top: 10px;
  margin-left: 10px;
  width: 98.8%;
}
.jieguo {
  margin-left: 10px;
}
</style>